[#ftl]
[@define "agile.dijit.Tooltip" "agile._Component,agile._Resizable"]
widgetName:"Tooltip"
[#assign templateString][#compress]		
	<div class="agileComponent agileTooltip">			
		<div class="dijitTooltipConnector" data-dojo-attach-point="connectorNode"></div>
		<div class="dijitTooltipContainer dijitTooltipContents" data-dojo-attach-point="contentNode">
			<div data-dojo-type='dijit.InlineEditBox'  data-dojo-props="renderAsHtml:true" style="width:150px" data-dojo-attach-point="label">{parameters.label}</div>
		</div>			
	</div>
[/#compress][/#assign]
,templateString:"${templateString?js_string}"
,resizeAxis: "x"
//,delegate:null	
	,styleConstraints:agile.delegate(agile._Component.prototype.styleConstraints,{
		"left": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"top": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"right": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"bottom": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"position": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"z-index": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	})
,attributes:agile.delegate(agile._Component.prototype.attributes,{
	label:lang.mixin({},agile.MultiTextMetadata,{
		label:"i18n_content",renderAsInnerHtml:true
		,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){					
//					widget.metadata(name,value);
			widget.metadata("parameters."+name,value);
			widget.label.set("value",value);					
//			widget.delegate.set(name,value);
		}
	})				
//	,position:lang.mixin({},agile.ComboMetadata,{	
//		label:"i18n_position"
//		,options:agile.i18nMap(["left","right","above","below"],null,true)
//		,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){					
//			widget.reposition(widget.metadata("parameters.position"),value);
////			widget.delegate.set(name,value);
//		}																			
//	})			
//   ,showDelay:lang.mixin({},agile.NumberMetadata,{
//	   label:"i18n_show_delay"			   
//	   ,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){					
////				   widget.metadata(name,value);
//		   widget.metadata("parameters."+name,value);
////		   widget.delegate.set(name,value);
//	   }
//   })
   
//   ,connectId:lang.mixin({},agile.ArrayMetadata,{
//	   label:"i18n_connect_ids"
//	   ,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){					
////			widget.delegate.addTarget(value);
////					widget.metadata(name,value);
//			widget.metadata("parameters."+name,value);
//		}
//   })	
	,connector:lang.mixin({},agile.TextMetadata,{
		   label:"i18n_connector_label",_ignore:true
		   ,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){					
//				widget.delegate.addTarget(value);
//						widget.metadata(name,value);
				widget.metadata("parameters."+name,value);
			}
	   })	
})
,_getDelegatePrototype:function(){
	agile.requireX("dijit.InlineEditBox");
	agile.requireX("dijit.Tooltip");			
	return dijit.Tooltip.prototype;
}
,initDefaultMetadata:function(){
	//this.metadata("parameters.position","right");			
	this.metadata("parameters.label","hello");
	this.metadata("parameters.connector","tooltip");
//			this.metadata("style.width","200");
	this.metadata("parameters.connectId",[]);
//	this.metadata("parameters.showDelay",500);			

	this.metadata("dojoDeclaredClass","dijit.Tooltip");			
}
,extractNodeParams:function(node){
	this.metadata("parameters.label",node.innerHTML);	
}
,postCreate:function(){
//	domClass.add(this.domNode,"dijitTooltip"+agile.capitalize(this.metadata("parameters.position")));
	domClass.add(this.domNode,"dijitTooltipRight");
//	this.delegate = new dijit.Tooltip({label:this.metadata("parameters.label")});			
//	this.delegate.addTarget(this.metadata("parameters.connectId"));
}
,init:function(){
	aspect.after(this.label,"onChange",lang.hitch(this,function(newValue){										
		topic.publish("agile.widget.changed",this.category,"label",newValue);					
		this.metadata("parameters.label",newValue);
//		this.delegate.set("label",newValue);
	}),true);
	
	 this.preventDelete(this.label);
//			this.label.startup();
	
//			domClass.add(this.domNode,"dijitTooltip"+agile.capitalize(this.metadata("position")));	
	
//			this.delegate = new dijit.Tooltip({label:this.metadata("label")});			
//			this.delegate.addTarget(this.metadata("connectId"));
}
,reposition:function(oldPosition,newPosition){		
	////console.log(this.declaredClass,"~:reposition() is called",oldPosition,newPosition,newPosition != oldPosition);
	if(newPosition != oldPosition){
		if(oldPosition){			
			domClass.remove(this.domNode,"dijitTooltip"+agile.capitalize(oldPosition));
		}
		
		if(newPosition){
			domClass.add(this.domNode,"dijitTooltip"+agile.capitalize(newPosition));			
			this.metadata("parameters.position",newPosition);
		}
	}
		
	var box = agile.calcSize(this.contentNode);
	var box2 = agile.calcSize(this.connectorNode);
	
	switch (newPosition){
		case "left":
			style.set(this.connectorNode,"left",(box.l + box.w - 2) +"px");
			style.set(this.connectorNode,"top",(box.t + box.h - box2.h) +"px");
			break;
		case "right":
			style.set(this.connectorNode,"left",(box.l - box2.w + 2) +"px");
			style.set(this.connectorNode,"top",(box.t + box.h - box2.h) +"px");
			break;	
		case "above":
			style.set(this.connectorNode,"left",box.l +"px");
			style.set(this.connectorNode,"top",(box.t + box.h - 1) +"px");
			break;
		case "below":
			style.set(this.connectorNode,"left",box.l +"px");
			style.set(this.connectorNode,"top",(box.t - box2.h + 1) +"px");
			break;	
	}
	
	style.set(this.connectorNode,"zIndex",style.set(this.contentNode,"zIndex") + 1);			
}
,getResizableTargetContainer:function(){
	return this.domNode;
}
,getResizeHandleAnchorNode:function(){
	return this.domNode;
}
,toHtml:function(params){
	if(params.sourceType == "dojo"){
		this.metadata("parameters.connectId",[this.metadata("id")]);
		var s = "<span id='{id}' style='position:absolute;left:{left};top:{top}'>{connector}</span>{template}";
		var template = this.inherited(arguments);
		return lang.replace(s,{left:this.metadata("style.left"),top:this.metadata("style.top"),id:this.metadata("id"),connector:this.metadata("parameters.connector"),template:template});
	}
	return this.inherited(arguments);
}
[/@]	 
